<script setup>
import {ref,onMounted, reactive} from 'vue'
import easyapi from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
//定义绑定的数据
const tableData=ref([]);
const checkObj=ref({
  page:1,
  size:5
});
const total=ref(90);
//分页绑定对象
// const pageObj=ref({
//   size:20,
//   page:1
// })
//查询数据的文本
//挂载页面时查询数据
onMounted(async function(){
  checkDate();
});

/*********************************************** */

const checkDate=async function(val){
  if(typeof val=='number'){
    checkObj.value.page=val;
  }
  //查询数据
  let result = await easyapi.getSearch("/api/searchuser",checkObj.value);
  //result现在返回的数据 {code,data,message}   data-->{list,count}
  //更新表格数据中的数据
tableData.value=result.data.list;
total.value=result.data.count;
}
</script>

    <template>
    <el-input v-model="checkObj.username" style="width: 150px" placeholder="请输入查询账号" />
        <el-input v-model="checkObj.position" style="width: 150px" placeholder="请输入查询的职位" />
        <el-button type="success" @click="checkDate">查询</el-button>
    <!-- <el-button type="success" @click="openAddWin">新增</el-button> -->
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <!-- <el-table-column prop="id" label="ID" width="180" /> -->
    <el-table-column prop="username" label="账号" width="180"/>
    <el-table-column prop="position" label="职位" width="180" />
    <!-- <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
        <el-button type="warning" @click="edit(scope.$index,scope.row)">编辑</el-button>
      </template>
    </el-table-column> -->
  </el-table>
  <!--current-page分页组件初始显示的页码 size每页的条数  -->
  <el-pagination 
  :page-size="checkObj.size"
  :current-page="checkObj.page"
  background layout="prev, pager, next" :total="total" @current-change="checkDate"/>
  
</template>
<style>
</style>
